<script setup lang="ts">
import {onMounted, onBeforeUnmount, ref, onBeforeMount} from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  return {
    towns: [
      {
        name: '河口镇',
        data: [
          { name: '农林牧渔', value: 100 },
          { name: '生态能源', value: 95 },
          { name: '水资源', value: 80 },
          { name: '水源涵养', value: 75 },
          { name: '土壤保持', value: 65 },
          { name: '洪水调蓄', value: 60 },
          { name: '空气净化', value: 55 },
          { name: '水质净化', value: 50 },
          { name: '固碳价值', value: 45 },
          { name: '释氧价值', value: 40 },
          { name: '气候调节', value: 35 },
          { name: '负氧离子', value: 30 },
          { name: '生物多样性保护', value: 25 },
          { name: '噪音消减', value: 20 },
          { name: '旅游康养', value: 15 },
          { name: '休闲游憩', value: 10 },
          { name: '景观增值', value: 5 }
        ]
      },
      {
        name: '永平镇',
        data: [
          { name: '农林牧渔', value: 95 },
          { name: '生态能源', value: 80 },
          { name: '水资源', value: 75 },
          { name: '水源涵养', value: 65 },
          { name: '土壤保持', value: 60 },
          { name: '洪水调蓄', value: 55 },
          { name: '空气净化', value: 50 },
          { name: '水质净化', value: 45 },
          { name: '固碳价值', value: 40 },
          { name: '释氧价值', value: 35 },
          { name: '气候调节', value: 30 },
          { name: '负氧离子', value: 25 },
          { name: '生物多样性保护', value: 20 },
          { name: '噪音消减', value: 15 },
          { name: '旅游康养', value: 10 },
          { name: '休闲游憩', value: 5 },
          { name: '景观增值', value: 0 }
        ]
      },
      // ... 其他乡镇数据
    ]
  };
};

// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);

let chart: echarts.ECharts | null = null;  // ECharts 实例

// 定义当前乡镇的索引和名称
const currentTownIndex = ref(0);
const currentTownName = ref('');

// 定义一个变量来存储定时器 ID
let intervalId: number | undefined;

// 定义一个异步函数来渲染柱状图
const renderBarChart = async () => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 初始化 ECharts 实例
    chart = echarts.init(chartRef.value);

    // 获取数据
    const data = await fetchData();
    const towns = data.towns;

    // 计算所有数据的最大值
    const maxDataValue = Math.max(
      ...towns.flatMap(town => town.data.map(item => item.value))
    );

    // 定义一个函数来更新图表配置项
    const updateChartOption = (index: number) => {
      const town = towns[index];
      // console.log("updateChartOption-town", town);
      return {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: town.name,
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          right: '10%',
          top: '10%',
        },
        // legend: {
        //   // data: town.name,
        //   data: town.data.map(item => item.name),
        //   align: 'left',
        //   itemGap: 50,
        //   right: '10%',
        //   y: '10%',
        //   icon: 'rect',
        //   itemWidth: 15,
        //   itemHeight: 15,
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 14
        //   },
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '25px',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: town.data.map(item => item.name),
          axisLabel: {
            padding: [15, 0, 0, 0],
            color: "#fff",
            fontSize: 14
          },
          axisTick: {
            inside: true,
            length: 8,
            lineStyle: {
              color: '#189cbb'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#189cbb'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(80,224,255,0.3)',
              type: 'dashed'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          max: maxDataValue * 1.2,
          axisLabel: {
            padding: [0, 15, 0, 0],
            color: '#189cbb',
            fontSize: 16
          },
          axisTick: {
            lineStyle: {
              color: '#189cbb'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#189cbb'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(80,224,255,0.3)',
              type: 'dashed'
            },
            show: false,
          },
          name: '价值（万元）',
          nameTextStyle: {
            color: "#fff",
            fontSize: 16,
            padding: [0, 0, 10, 0]
          }
        }],
        series: [
          {
            // name: town.name,
            name: "乡镇GEP核算数据来源",
            type: 'bar',
            barWidth: '13%',
            barGap: '10%',
            label: {
              show: false,
              position: "top",
              distance: 1,
              formatter: function (params: any) {
                return params.data.value;
              },
              color: "#dc0e0e",
              fontSize: 14,
            },
            itemStyle: {
              color: '#2f4b7c',
            },
            data: town.data.map(item => ({
              name: item.name,
              value: item.value
            }))
          }
        ]
      };
    };

    // 设置图表的配置项
    chart.setOption(updateChartOption(currentTownIndex.value));

    // 设置当前乡镇名称
    currentTownName.value = towns[currentTownIndex.value].name;
    // console.log("设置当前乡镇名称-currentTownName.value", currentTownName.value);

    // 每3秒切换下一个乡镇的数据展示
    intervalId = setInterval(() => {
      // console.log("每3秒切换下一个乡镇的数据展示");

      // 清理当前图表内容
      if (chart) {
        chart.clear();
      }

      // 更新索引和名称
      currentTownIndex.value = (currentTownIndex.value + 1) % towns.length;
      // console.log("切换下一个乡镇的数据展示-currentTownIndex.value", currentTownIndex.value);
      currentTownName.value = towns[currentTownIndex.value].name;
      // console.log("切换下一个乡镇的数据展示-currentTownName.value", currentTownName.value);

      // 重新设置图表配置项
      if (chart) {
        chart.setOption(updateChartOption(currentTownIndex.value));
      }
    }, 3000);
  }
};

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderBarChart();
  }, 200);
});

// 在组件卸载前清除定时器
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
  // 在组件销毁前执行
  // 清理图表实例
  if (chart) {
    console.log('销毁图表实例-bar03');
    chart.dispose();
    chart = null;
  }
});


</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%; background-color: rgba(207,201,201,0.1);"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
